"use client";
import { AppstoreOutlined, MailOutlined } from "@ant-design/icons";
import { Menu } from "antd";
import React, { useState } from "react";

export default function MyHome() {
  const items = [
    {
      label: "推荐",
    },
    {
      label: "手机",
    },
    {
      label: "智能",
    },
    {
      label: "电视",
    },
    {
      label: "家电",
    },
  ];
  const [current, setCurrent] = useState("mail");

  const onClick = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
  };
  return (
    <div>
      <Menu
        style={{ display: "flex", justifyContent: "space-around" }}
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
      />
      <div style={{ display: "flex" }}>
        <div
          className="div1"
          style={{
            width: "192px",
            height: "170px",
            textAlign: "center",
            backgroundColor: "pink",
          }}
        >
          left
        </div>
        <div
          className="div2"
          style={{
            width: "192px",
            height: "170px",
            textAlign: "center",
            backgroundColor: "skyblue",
          }}
        >
          right
        </div>
      </div>
      <div
        className="div3"
        style={{
          width: "100%",
          height: "50px",
          backgroundColor: "#f6f6f6",
          lineHeight: "50px",
          fontFamily: "STKaiti",
        }}
      >
              <h2 style={{ color: "gray" }}>热销爆款</h2>
              <img src="../../image.png" alt="" style={{width:"100%", height:"300px"}}/>
      </div>
    </div>
  );
}
